{include file="header.html"}
<body>
<style>
	.icon-phone{
		position: absolute;left: 0；z-index:5;
		background-image: url(http://img.softstao.com/uploadfiles/client/1/pic/2019/04/15/1941517093364965.png); /*引入图片图片*/
		background-repeat: no-repeat; /*设置图片不重复*/
		background-position: 0px 0px; /*图片显示的位置*/
		width: 20px; /*设置图片显示的宽*/
		height: 30px; /*图片显示的高*/
		margin: 10px 10px;
	}
	.icon-key{
		position: absolute;left: 0；z-index:5;
		background-image: url(http://img.softstao.com/uploadfiles/client/1/pic/2019/04/15/1941515584475339.jpg); /*引入图片图片*/
		background-repeat: no-repeat; /*设置图片不重复*/
		background-position: 0px 0px; /*图片显示的位置*/
		width: 20px; /*设置图片显示的宽*/
		height: 30px; /*图片显示的高*/
		margin: 12px 10px;
	}
	input{
		width: 300px;height: 45px;
		padding-left: 40px;
		border: #e5e5e5 solid 1px;
		font-size: 14px;
		color: #999999;
	}
</style>
<div class="navBar ge-bottom">
	<a class="left" href="javascript:history.back()"><i class="return"></i></a>
	<div class="titleView-x">登录</div>
	<!--<a class="right" href="wap.php?tpl=register&url={urlencode($url)}"><span>注册</span></a>-->
</div>

<div class="login-index width-wrap main-top">
	<form action="api.php?app=passport&act=login" method="post">
		<div style="width: 300px;height: 30px;margin: 20px auto;">
			<i class="icon-phone"></i>
			<input type="tel" name="mobile" id="mobile" placeholder="请输入手机号码"/>
		</div>
		<div style="width: 300px;height: 30px;margin: 30px auto;position: relative;">
			<div style="float: left;">
				<i class="icon-key"></i>
				<input style="width: 290px;" type="text" name="code" id="code" placeholder="请输入验证码"/>
			</div>
			<div style="width: 100px;height: 45px;float: left;background: #ffb421;border-radius: 5px;position: absolute;left: 200px;">
				<a href="javascript:void(0)" onclick="Code()" style="text-decoration:none;">
					<p id="sms" style="font-size: 16px;padding-top: 5px;color: white;text-align: center;margin-top: 5px;">
						获取验证码
					</p>
				</a>
			</div>
		</div>
		<div style="width: 300px;height: 45px;margin: 45px auto;">
			<a href="javascript:void(0)"style="text-decoration:none;" onclick="myFn()">
				<div style="font-size: 18px;width:300px;background-color: #ff881f;text-align: center;color: white;border-radius: 5px;height: 45px;">
					<p style="padding-top: 9px;color: white;">
						提交
					</p>
				</div>
			</a>
		</div>


	</form>
</div>

{include file="footer.html"}
<script>
    var _mobileText = '', _codeText = '', _getCode = false, _count = 0, _timer = null;
    function myFn(){
        if(!$('#mobile').val().length){
            alert('请输入手机号码');
            return;
        }
        if(!$('#code').val().length){
            alert('请输入验证码');
            return;
        }
        if($('#code').val()!=_codeText){
            alert('验证码不正确');
            return;
        }
        $('form').submit();
    }
    function Code(){
        if(_getCode)return false;
        if(!$('#mobile').val().length){
            alert('请输入手机号码');
            return false;
        }
        _getCode = true;
        _mobileText = _codeText = '';
        $.postJSON('api.php?app=passport&act=send_sms', { mobile:$('#mobile').val() }, function(json){
            if(json.error!=0){
                alert(json.msg);
                return;
            }
            _mobileText = json.data.mobile;
            _codeText = json.data.code;
            var count = 60;
            const countDown = setInterval(() => {
                if (count === 0) {
                    _getCode = false;
                    $('#sms').text('重新发送').removeAttr('disabled');
                    clearInterval(countDown);
                } else {
                    $('#sms').attr('disabled', true);
                    $('#sms').text(count + '秒后重发');
                }
                count--;
            }, 1000);

        });
    }

</script>